<template>
	<view class="user-info">
		<u-avatar :src="src" shape="square" size="120"></u-avatar>
		<view class="info-detail">
			<p class="user-name">{{userName}}</p>
			<p class="info-data">余额：<span
					style="margin-right: 20rpx;">{{balance}}</span>优惠券：<span>{{discountCoupon}}</span></p>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 优惠券
			discountCoupon: {
				type: Number,
				default () {
					return 0
				}
			},
			// 余额
			balance: {
				type: Number,
				default () {
					return 0
				}
			},
			// 头像链接
			src: {
				type: String,
				default () {
					return 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
				}
			},
			// 用户名
			userName: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {

			}
		},
	}
</script>

<style scoped lang="scss">
	.user-info {
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.info-detail {
			margin-left: 40rpx;

			.user-name {
				font-size: 40rpx;
				font-weight: bolder;
			}

			.info-data {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>